
<template>
    <div>
        <input type="hidden" value="2017-10-18" ref="in">
        <div class="box">
            <Form :model="formItem" :label-width="80">
                <Row>
                    <Col span="5">
                    <FormItem label="开始日期">
                        <DatePicker type="date" :options="options1" v-model="formItem.start" @on-change="geTimestart"></DatePicker>
                    </FormItem>
                    </Col>
                    <Col span="5">
                    <FormItem label="结束日期">
                        <DatePicker type="date"  :options="options2" v-model="formItem.end" @on-change="geTimend"></DatePicker>
                    </FormItem>
                    </Col>
                    <Col span="5">
                    <FormItem label="状态">
                        <Select v-model="formItem.status">
                            <Option v-for="item in formItem.statusArr" :value="item" :key="item">{{ item }}</Option>
                        </Select>
                    </FormItem>
                    </Col>

                    <Col span="2" offset="1">
                        <Button type="primary" @click="searchBtn">查询</Button>
                    </Col>

                </Row>
            </Form>

            <Table border :columns="columns" :data="datas"></Table>

           <!-- <Page :total="pageTotal"
                  :page-size='30'
                  size="small"
                  @on-change="pageChange"
                  show-elevator
                  show-total>
            </Page>-->
        </div>

        <Modal v-model="modalEdit"
               title="优惠券-编辑"
               :loading="loading"
               @on-ok="editOk"
               @on-cancel="editCancel">
            <Form :model="formItem" :label-width="80">
                <Row>
                    <Col><FormItem label="优惠券ID"><Input v-model="modalData.id"></Input></FormItem></Col>
                    <Col><FormItem label="优惠券描述"><Input v-model="modalData.desc" type="textarea" :autosize="{minRows: 5,maxRows: 10}"></Input></FormItem></Col>
                    <Col><FormItem label="优惠券类型"><Input v-model="modalData.type"></Input></FormItem></Col>
                    <Col><FormItem label="上架时间"><Input v-model="modalData.startime"></Input></FormItem></Col>
                    <Col><FormItem label="下架时间"><Input v-model="modalData.endtime"></Input></FormItem></Col>
                    <Col><FormItem label="当前状态"><Input v-model="modalData.status"></Input></FormItem></Col>
                    <Col><FormItem label="已领取数量"><Input v-model="modalData.getNum"></Input></FormItem></Col>
                    <Col><FormItem label="已使用数量"><Input v-model="modalData.useNum"></Input></FormItem></Col>
                </Row>
            </Form>
        </Modal>
        <Modal v-model="modalDel"
               title="优惠券-删除"
               :loading="loading"
               @on-ok="delOk"
               @on-cancel="delCancel">
            确定删除?
        </Modal>

        <Modal v-model="modalOff"
               title="优惠券-下架"
               :loading="loading"
               @on-ok="offOk"
               @on-cancel="offCancel">
            确定下架?
        </Modal>
    </div>

</template>

<script>
    import * as Button from '../../lib/actionBtn'
    import * as fuc from '../../lib/lib'
    import {CouponApi,Header} from '../../api/api'
    import * as Url from '../../api/url'
    import axios from 'axios'
    export default {
         data () {
            return {
                current:'couponsList',  //当前页
                columns: [
                    {title:'优惠券ID',  key: 'id',width:70},
                    {title:'优惠券标题',key: 'title',width:130},
                    {title:'优惠券描述',key: 'description',width:160},
                    {title:'优惠券类型',key: 'type',width:110,
                        render: (h, params) => {
                            return h('p', {
                                style: {marginRight: '5px',cursor:'pointer'},
                                on: {
                                    click: (e) => {
                                        if (this.datas[params.index].type=='一人一码'){
                                        }else {
                                            return false;
                                        }
                                    },
                                }
                            },this.datas[params.index].type )
                        }
                    },
                    {title:'上架时间',  key: 'beginDate',width:120},
                    {title:'下架时间',  key: 'endDate',width:120},
                    {title:'当前状态',  key: 'publishStatus',width:90},
                    {title:'已领取数量',key: 'totalAcquired'},
                    {title:'已使用数量',key: 'totalUsed'},
                    {title: '操作', key: 'action', width: 250, align: 'center',
                        render: (h, params) => {
                            return this.action(h,params)
                        }
                    }
                ],
                datas: [],
                pageTotal:'',    //总页数
                pageNum:'',       //当前分页
                loading:false,
                formItem:{
                    start:'',      //开始时间
                    end:'',        //结束
                    statusDefault:-1,
                    status:'全部',     //状态
                    statusArr:['全部','已上架','未上架','已下架']
                },
                end:'',
                modalEdit:false,
                modalDel:false,
                modalOff:false,
                modalDelId:'',
                off:'下架',   //下架按钮
               /* typeColor:'warning', //下架按钮颜色
                disabled:false,     //是否可以点击*/
                delIndex:'',
                statusInfo:'',
                soldOutArr:[],
                couponsIndex:'',
                modalData:{
                    id:'',
                    desc:'',
                    type:'',
                    startime:'',
                    endtime:'',
                    publishStatus:'',
                    getNum:'',
                    useNum:''
                },
                options1:{   //开始   今天以后不可选
                    disabledDate (date) {
                        return date.getTime() > Date.now();
                    }
                  /*disabledDate: (time) => {
                   let beginDateVal = this.formItem.start;
                   if (beginDateVal) {
                   return time.getTime() > beginDateVal;
                   }
                   }*/
                },
                options2:{   //结束   开始时间----到今天 不可选
                  disabledDate (date) {
                    return date.getTime() < Date.now()- 86400000;
                    /*let beginDateVal = this.formItem.start;
                    if (beginDateVal) {
                      return date.getTime() < beginDateVal;
                    }*/
                  }
                }
            }
        },

        mounted:function () {
            this.$nextTick(function () {
                this.pageChange()
            })
        },
        computed: {

        },
        methods: {
          disabledEndTime(date){
            let t=this.formItem.start;
            let initdate = (new Date(t)) - 86400000;
            return (date && date.valueOf() < initdate) || (date && date.valueOf() >= new Date());
          },

          geTimestart(date){
                this.formItem.start=date;
            },
            geTimend(date){
                this.formItem.end=date;
            },
            pageChange(page){
                this.isFirstBool=true;
                this.formItem.start=fuc.dateFormatYMD(fuc.dateForward(30));
                this.formItem.end=fuc.dateFormatYMD(new Date());
                //console.log("状态:"+this.formItem.statusDefault+":"+this.formItem.start+":"+this.formItem.end);
                let data={
                    beginDate:this.formItem.start,
                    endDate:this.formItem.end,
                    publishStatus: this.formItem.statusDefault
                }
              this.couponsList(data);
            },
          searchBtn(){
            switch (this.formItem.status){
              case "全部"  :this.formItem.status=-1;break;
              case "已上架":this.formItem.status=1;break;
              case "未上架":this.formItem.status=0;break;
              case "已下架":this.formItem.status=2;break;
            }
            if(this.formItem.start !="NaN-NaN-NaN" && this.formItem.start !="" ){
              this.formItem.start =fuc.dateFormatYMD(this.formItem.start);
              if(this.formItem.start=="1970-01-01"){
                this.formItem.start =null;
              }
            }else {
              this.formItem.start =null;
            }
            if(this.formItem.end !="NaN-NaN-NaN" && this.formItem.end !="" ){
              this.formItem.end =fuc.dateFormatYMD(this.formItem.end);
              if(this.formItem.end=="1970-01-01"){
                this.formItem.end =null;
              }
            }else {
              this.formItem.end =null;
            }
            let data={
              beginDate:this.formItem.start,
              endDate:this.formItem.end,
              publishStatus: this.formItem.status
            };
           // console.log(data)
            this.couponsList(data);
          },
            couponsList(data){
              this.datas=[];
              CouponApi.getCouponList({params:data}).then( response=>{
                this.datas= response.data;
                //console.log(this.datas)
                if(this.datas !=undefined || this.datas !=null){
                  //this.pageTotal=response.data.length;
                  this.datas.map( v=> {
                    this.soldOutArr.push({typeColor:'warning',disabled:false})
                    switch (v.publishStatus) {
                      case 0:
                        v.publishStatus = "未上架";
                        break;
                      case 1:
                        v.publishStatus = "已上架";
                        break;
                      case 2:
                        v.publishStatus = "已下架";
                        break;
                    }
                    switch (v.type ) {
                      case 1:
                        v.type  = "优惠券";
                        break;
                      case 2:
                        v.type  = "优惠码";
                        break;
                    }
                  })
                }

              }).catch( error=>{
                //console.log(error)
              });
            },
            couponOff(index){
                this.couponsIndex = index;
                this.modalOff=true;
                this.modalDelId=this.datas[index].id;
            },
            offOk(){
                axios.post(Url.couponOff+this.modalDelId).then( response=>{
                if(response.data.messageCode=='200'){
                  this.soldOutArr[this.couponsIndex].typeColor='Default';
                  this.soldOutArr[this.couponsIndex].disabled=true;
                  this.datas[this.couponsIndex].publishStatus ='已下架';
                  this.$Message.success('下架成功');
                }else{
                  this.$Message.error('下架失败');
                }
              }).catch( error=>{
                  this.$Message.error('下架失败');
              });
            },
            offCancel(){
                this.modalOff=false;
            },
            editModal(index){
                this.modalEdit=true;
                this.modalData.id=this.datas[index].id;
                this.modalData.desc=this.datas[index].description;
                this.modalData.type=this.datas[index].type;
                this.modalData.startime=this.datas[index].beginDate;
                this.modalData.endtime=this.datas[index].endDate;
                this.modalData.status=this.datas[index].publishStatus;
                this.modalData.getNum=this.datas[index].totalAcquired;
                this.modalData.useNum=this.datas[index].totalUsed;
            },
            editOk(){
            },
            editCancel(){
                this.modalEdit=false;
            },
            removeModal(index){
             // console.log("删除ID:"+index);
                this.modalDel=true;
                this.delIndex=index;
                //this.modalData.id=this.datas[index].id;
                this.modalDelId=this.datas[index].id;
            },
            delOk(){
              this.modalDel=false;
              CouponApi.delCoupons(Url.coupons+this.modalDelId).then( response=>{
                if(response.messageCode==200){
                  this.datas.splice(this.delIndex, 1);
                  this.$Message.success(this.modalDelId+' 删除成功');
                }else{
                  this.$Message.error(response.description)
                }
              }).catch( error=>{
                //console.log(error)
              });
            },
            delCancel(){
                this.modalDel=false;
            },

            action(h,params){
                this.publishStatus =params.row.publishStatus;
                if(this.publishStatus=='已上架'){
                    return  [
                        Button.allBtns.btnOff(this,h,params),
                        Button.allBtns.btnInfo(this,h,params),
                    ]
                }else if(this.publishStatus=='未上架'){
                    return  [
                        Button.allBtns.btnEdit(this,h,params),
                        Button.allBtns.btnInfo(this,h,params),
                        Button.allBtns.btnDel(this,h,params),
                    ]
                }else if(this.publishStatus=='已下架'){
                    return  [
                        Button.allBtns.btnInfo(this,h,params),
                    ]
                }

            }
        },
        components:{
        }
    }
</script>

<style scoped>
    .box{padding:10px;}
    .ivu-input[disabled], fieldset[disabled] .ivu-input {background-color: #f3f3f3;opacity: 1;cursor: not-allowed;color: #6b6b6b;}
    .ivu-page {margin-top: 10px;}
</style>
